import React, { useState } from 'react';

export default WrappedComponent => {
  const Index = props => {
    const [readOnly, setReadOnly] = useState(true);
    return (
      <WrappedComponent
        {...props}
        autoComplete="off"
        readOnly={readOnly}
        onFocus={() => {
          setReadOnly(false);
        }}
      />
    );
  };

  Object.keys(WrappedComponent).forEach(item => {
    Index[item] = WrappedComponent[item];
  });
  Index.displayName = `disableAutoComplete(${WrappedComponent.displayName})`;
  return Index;
};
